import React from 'react'
import styles from './CardWrapper.module.css'
import logo from '../assets/logo-head.png'

/**
 * 显示头像
 * @param allUnReadData  整个对象
 * @param chatListItem 对应要显示头像的群组
 */
export default function showAvatar (props) {
  const _mockData = {
    data: {
      rosters: {
        153424: { name: '杨昊', photo: 'https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0/2023080414/a82f30dc-cc16-4c42-9994-6305ee4269b8.png.thumb.jpg' },
        3459165: { name: '昵称-张良云', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/iuap-apcom-file/2022/07/05/14/16/4532bc6d-072c-4bd0-82f8-400bb2ce99ec.png.thumb.jpg' },
        3803457: { name: '杨永安', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/92052/3803457/202109/18/16319555567cd06635eaaf09afba1f64bd1df46629.jpg.thumb.jpg' },
        3808219: { name: '朱天昊', photo: '' },
        4592434: { name: '马英杰', photo: '' },
        153009: { name: '昵称-15801629593', photo: 'https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0/2023102413/c692d74f-49d4-47bb-a7b0-bf568cd68c0c.jpg.thumb.jpg' },
        153450: { name: '昵称-贾爱华', photo: 'https://ykj-open-api-test.diwork.com/iuap-apcom-file-obs/iuap-apcom-file/0/2023061310/8a61719c-ade8-4201-b0a9-65d0bfed5dab.png.thumb.jpg' },
        232722: { name: '杜金月', photo: 'https://cdn.yonyoucloud.com/dev/yht/21844/232722/202007/29/15960076178b4a170bd8f07a02463f0d6931b8d5cf.jpg.thumb.jpg' },
        3267563: { name: '昵称-18210885020', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/iuap-apcom-file/0/2022120215/16ed7f84-2751-4842-9300-8825a0ffd12f.png.thumb.jpg' },
        3309107: { name: '昵称-班耀强', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/25429/3309107/202106/4/1622791357dca58601ecec4924603631a957768f2c.jpg.thumb.jpg' },
        3310880: { name: '昵称-谷婉月', photo: '' },
        3371334: { name: '15076202269', photo: '' },
        3459139: { name: '昵称-张琳', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/22650/3459139/202101/15/16106801801234c6b3fc09945239687c972294c60e.jpg.thumb.jpg' },
        3612029: { name: '昵称-tree', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/iuap-apcom-file/2022/07/05/14/04/a8533304-3688-4020-a01a-09818cd256b3.png.thumb.jpg' },
        3731658: { name: '昵称-赵玮', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/iuap-apcom-file/0/2022111816/e059fc80-c98f-4cf7-ba85-a7157dcc536a.jpg.thumb.jpg' },
        3746079: { name: '卞文硕', photo: 'https://ykj-esn-test.obs.cn-north-4.myhuaweicloud.com/28057/3746079/202111/8/16363555796dbfd2f70a92c7c0c4d23416ab72273a.jpg.thumb.jpg' }
      },
      msgGroupInfo: {
        id: '1794889124074225669',
        name: '和桑雨111',
        chatList: [
          { businessId: 'group_28057_31303', businessName: '第四个内部群', businessType: 'groupchat', groupAvatar: { avatars: ['232722'] } },
          { businessId: 'cooperation~28057~50145', businessName: '智能客服机器人协作群', businessType: 'groupchat', groupAvatar: { avatars: ['153424', '3267563', '153450', '3731658'] } },
          { businessId: 'cgroup_1821766857619144711', businessName: '杜金月、张琳1、张良云', businessType: 'groupchat', groupAvatar: { avatars: ['3612029', '3459139', '3459165', '232722'] } },
          { businessId: 'group_1820877928211677188', businessName: '对照组', businessType: 'groupchat', groupAvatar: { avatars: ['3612029', '3459139', '3459165', '232722'] } }
        ]
      }
    },
    type: 'yzone_pc_digest_ai_batch/unread'
  }

  const {allUnReadData = _mockData, chatListItem = allUnReadData.data.msgGroupInfo.chatList[0]} = props
  const roasters = allUnReadData?.data?.rosters || []
  const { avatars = [] } = chatListItem.groupAvatar
  const groupMemberNum = avatars.length
  const _name0 = String(roasters[avatars[0]]?.name)
  const _name1 = String(roasters[avatars[1]]?.name)
  const _name2 = String(roasters[avatars[2]]?.name)
  const _name3 = String(roasters[avatars[3]]?.name)

  const getAvatar = (unRead2, _chatListItem) => {
    if (groupMemberNum === 1) { //   群里只有一个人的头像
      const _logo = roasters[avatars[0]].photo
      return <>
        {
          _logo ? <img alt='头像' src={_logo} className={styles.avatar} /> :<div className={styles.avatar + ' '+ styles.color0 + ' '+ styles.bigFont }>{getLastStr(_name0)}</div>
        }
      </>
    } else if (groupMemberNum === 2) { //   群里有两个人的头像
      return <>
        <div className={styles.avatar}>
          {
            roasters[avatars[0]].photo ? <img className={styles.img2} src={roasters[avatars[0]].photo} alt=""/> :<div className={styles.img2 + ' '+ styles.color0+ ' '+ styles.middleFont }>{getLastStr(_name0)}</div>
          }
          <div className={styles.divCol}></div>
          {
            roasters[avatars[1]].photo ? <img className={styles.img2} src={roasters[avatars[1]].photo} alt=""/> :<div className={styles.img2 + ' '+ styles.color1+ ' '+ styles.middleFont}>{getLastStr(_name1)}</div>
          }
        </div>
      </>
    } else if (groupMemberNum === 3) { //   群里有三个人的头像
      return (
        <div className={styles.avatar}>
          <div className={styles.left}>
            {
              roasters[avatars[0]].photo ? <img className={styles.img31} src={roasters[avatars[0]].photo} alt=""/> :<div className={styles.img31 + ' '+ styles.color0+ ' '+ styles.middleFont }>{getLastStr(_name0)}</div>
            }
          </div>
          <div className={styles.divCol}></div>
          <div className={styles.right}>
            {
              roasters[avatars[1]].photo ? <img className={styles.img31} src={roasters[avatars[1]].photo} alt=""/> :<div className={styles.img32 + ' '+ styles.color1}>{getLastStr(_name1)}</div>
            }
            <div className={styles.divRow}></div>
            {
              roasters[avatars[2]].photo ? <img className={styles.img31} src={roasters[avatars[2]].photo} alt=""/> :<div className={styles.img32 + ' '+ styles.color2}>{getLastStr(_name2)}</div>
            }
          </div>
        </div>
      )
    } else if (groupMemberNum >= 4) { //   群里有四个人及以上的头像
      return (
        <div className={styles.avatar}>
          <div className={styles.left}>
            {
              roasters[avatars[0]].photo ? <img className={styles.img4} src={roasters[avatars[0]].photo} alt=""/> :<div className={styles.img4 + ' '+ styles.color0}>{getLastStr(_name0)}</div>
            }
            <div className={styles.divRow}></div>
            {
              roasters[avatars[1]].photo ? <img className={styles.img4} src={roasters[avatars[1]].photo} alt=""/> :<div className={styles.img4 + ' '+ styles.color1}>{getLastStr(_name1)}</div>
            }
          </div>
          <div className={styles.divCol}></div>
          <div className={styles.right}>
            {
              roasters[avatars[2]].photo ? <img className={styles.img4} src={roasters[avatars[2]].photo} alt=""/> :<div className={styles.img4 + ' '+ styles.color2}>{getLastStr(_name2)}</div>
            }
            <div className={styles.divRow}></div>
            {
              roasters[avatars[3]].photo ? <img className={styles.img4} src={roasters[avatars[3]].photo} alt=""/> :<div className={styles.img4 + ' '+ styles.color3}>{getLastStr(_name3)}</div>
            }
          </div>
        </div>
      )
    }
  }

  return <>
    {
      getAvatar(allUnReadData, chatListItem)
    }
  </>
}

function getLastStr (str) {
  return str.charAt(str.length - 1)
}
